<template>
	<div class="container" v-loading="loading">
		<div class="head-img">
			<img src="../../assets/zaixian_03.png" />
		</div>
		<div class="swiper">
			<img src="../../assets/bans_03.png" alt="">
		</div>
		<div class="selects">
			<el-radio-group v-model="radio2" @change='chang'>
				<el-radio :label="1" :disabled='!(canPeopleMediationApprove==true)'>人民调解</el-radio>
				<el-radio :label="2" :disabled='!(canLegalAidApprove==true)'>法律援助</el-radio>
			</el-radio-group>
		</div>
		<div class="switch_title">
			<ul class='onapp' style="position: relative">
				<li v-if="!mydoc" v-bind:class="{ active: isActive==1 }" @click="fnSwitch(1)">
					<span>全部</span>
					<div v-bind:class="{ line: isActive==1}"></div>
				</li>
				<li v-else v-bind:class="{ active: isActive==2 }" @click="fnSwitch(2)">
					<span>我的任务({{names}})</span>
					<div v-bind:class="{ line: isActive==2 }"></div>
				</li>
				<p class="logout" @click="logout">退出</p>
			</ul>
		</div>
		<div class="listSp" style="padding-bottom: 6rem;">
			<div style="overflow: scroll;" class="divs">
				<mt-loadmore :bottomPullText='bottomPullText' :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
					<ul>
						<li v-for="item in Articles" :key='item.id'>
							<router-link v-bind="{to:'/appdetails/'+(item.id)}" v-if='radio2==1'>
								<div class="clearfix">
									<span class="tiemes fl">{{item.creationTime | datas}}</span>
									<span class="tiemes fr" v-if='item.assignToUser'>指派给：{{item.assignToUser}}</span>
								</div>
								<div class="clearfix fivs">
									<div class="fl tips">
										<span class="ff" v-if='item.status==2'>拒绝</span>
										<span class="ll" v-if='item.status==0'>提交</span>
										<span class="ll" v-if='item.status==3'>完成</span>
										<span class="zz" v-if='item.status==1'>受理</span>
									</div>
									<div class="fl sqr">
										<p>申请人</p>
										<p>{{item.name}}</p>
									</div>
									<div class="fl sqr">
										<p>事由</p>
										<p>{{item.reason}}</p>
									</div>
								</div>
							</router-link>
							<router-link v-bind="{to:'/leAidetails/'+(item.id)}" v-else>
								<div class="clearfix">
									<span class="tiemes fl">{{item.creationTime | datas}}</span>
									<span class="tiemes fr" v-if='item.assignToUser'>指派给：{{item.assignToUser}}</span>
								</div>
								<div class="clearfix fivs">
									<div class="fl tips">
										<span class="ff" v-if='item.status==2'>拒绝</span>
										<span class="ll" v-if='item.status==0'>提交</span>
										<span class="ll" v-if='item.status==3'>完成</span>
										<span class="zz" v-if='item.status==1'>受理</span>
									</div>
									<div class="fl sqr">
										<p>申请人</p>
										<p>{{item.name}}</p>
									</div>
									<div class="fl sqr">
										<p>事由</p>
										<p>{{item.reason}}</p>
									</div>
								</div>
							</router-link>
						</li>
					</ul>
				</mt-loadmore>
				<div class="page-footer" v-if="tip">到底了</div>
				<p class="page-footer" style="padding-top: 15px;text-align: center;" v-if="datalist">暂无数据</p>
			</div>
		</div>
		<div class="nav">
			<ul>
				<li @click="fnHome">
					<img src="../../assets/icon/tab_home_n@2x.png" alt="">
					<span>首页</span>
				</li>
				<li>
					<router-link :to="menu[0].url+'/'+menu[0].id">
						<img src="../../assets/icon/tab_message_n@2x.png" alt="">
						<span>{{menu[0].displayName}}</span>
					</router-link>
				</li>
				<li>
					<router-link :to="menu[1].url+'/'+menu[1].id">
						<img src="../../assets/icon/law_n@2x.png" alt="">
						<span>{{menu[1].displayName}}</span>
					</router-link>
				</li>
				<li>
					<router-link :to="menu[2].url+'/'+menu[2].id">
						<img src="../../assets/icon/ative_n@2x.png" alt="">
						<span>{{menu[2].displayName}}</span>
					</router-link>
				</li>
				<li class="active" @click="fnSunTour">
					<img src="../../assets/icon/222.png" alt="">
					<span>在线审批</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Api from "../../kites/api";
export default {
  name: "Onapprove",
  data() {
    return {
      datalist: false,
      allLoaded: false,
      bottomPullText: "加载更多",
      tip: false,
      loading: "",
      isActive: 1,
      category: [],
      radio2: 1,
      menu: [
        {
          type: "",
          id: "",
          name: "",
          displayName: "",
          icon: "",
          url: ""
        },
        {
          type: "",
          id: "",
          name: "",
          displayName: "",
          icon: "",
          url: ""
        },
        {
          type: "",
          id: "",
          name: "",
          displayName: "",
          icon: "",
          url: ""
        }
      ], //菜单
      Articles: [], //文章列表
      pages: 10,
      pageindex: 1,
      id: "",
      totalCount: 0,
      isture: false,
      power: {},
      canPeopleMediationApprove: false,
      canLegalAidApprove: false,
      mydoc: true,
      names: localStorage.name,
      localStorageArr: [
        "canLegalAidAction",
        "canLegalAidApprove",
        "canPeopleMediationAction",
        "canPeopleMediationApprove",
        "name",
        "userName",
        "userPass",
        "userType",
        "token"
      ]
    };
  },
  activated() {
    this.authenticate();
  },
  beforeCreate() {
    this.openIds();
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == "appdetails" || to.name == "leAidetails") {
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
    }
    next();
  },
  created() {
    this.menu = JSON.parse(localStorage.meun);
    this.authenticate();
  },
  methods: {
    logout() {
      for (let i = 0; i < this.localStorageArr.length; i++) {
        localStorage.removeItem(this.localStorageArr[i]);
      }
      this.ClearOpenId();
    },
    chang() {
      this.Articles = [];
      this.totalCount = 0;
      this.allLoaded = false;
      if (this.radio2 == 1) {
        if (this.power.canPeopleMediationAction == true) {
          this.isActive = 2;
          this.isture = true;
        } else {
          this.isture = false;
          this.isActive = 1;
        }
        this.GetPeopleMediations();
        this.mydoc = this.power.canPeopleMediationAction;
      } else {
        if (this.power.canLegalAidAction == true) {
          this.isActive = 2;
          this.isture = true;
        } else {
          this.isActive = 1;
          this.isture = false;
        }
        this.mydoc = this.power.canLegalAidAction;
        this.GetLegalAids();
      }
    },
    //获取token
    authenticate() {
      this.names = localStorage.name;
      this.loading = true;
      this.$post(Api.acctoken, {
        openId: localStorage.openID
      }).then(res => {
        if (res.data.success == true) {
          localStorage.token = res.data.result.token;
          this.GetAccess();
        } else {
          this.$message.error(res.data.error.message);
        }
      });
    },
    // 退出清除openid
    ClearOpenId() {
      this.$post(Api.ClearOpenId, {
        openId: localStorage.openID
      }).then(res => {
        if (res.data.success == true) {
          this.$router.push("/login");
        } else {
          this.$message.error(res.data.error.message);
        }
      });
    },
    GetAccess() {
      this.$post(Api.GetAccess).then(res => {
        if (res.data.success == true) {
          this.power = res.data.result;
          console.log(res.data.result);
          this.canLegalAidApprove = res.data.result.canLegalAidApprove;
          localStorage.canLegalAidApprove = res.data.result.canLegalAidApprove;
          localStorage.canLegalAidAction = res.data.result.canLegalAidAction;
          this.canPeopleMediationApprove =
            res.data.result.canPeopleMediationApprove;
          localStorage.canPeopleMediationApprove =
            res.data.result.canPeopleMediationApprove;
          localStorage.canPeopleMediationAction =
            res.data.result.canPeopleMediationAction;
          if (
            this.power.canPeopleMediationApprove == true ||
            this.power.canPeopleMediationAction == true
          ) {
            this.radio2 = 1;
            if (this.power.canPeopleMediationAction == true) {
              this.isActive = 2;
              this.isture = true;
            } else {
              this.isActive = 1;
            }
            this.mydoc = res.data.result.canPeopleMediationAction;
            this.GetPeopleMediations();
          } else if (
            this.power.canLegalAidApprove == true ||
            this.power.canLegalAidAction == true
          ) {
            this.radio2 = 2;
            if (this.power.canLegalAidAction == true) {
              this.isActive = 2;
              this.isture = true;
            } else {
              this.isActive = 1;
            }
            this.mydoc = res.data.result.canLegalAidAction;
            this.GetLegalAids();
          }
          this.loading = false;
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    //切换动态
    fnSwitch(type) {
      this.isActive = type;
      this.datalist = false;
      this.allLoaded = false;
      //				$('.scroller').css("transform","translate("+0+"px,"+0+"px)")
      if (this.radio2 == 1) {
        switch (type) {
          case 1:
            this.isture = false;
            this.GetPeopleMediations();
            break;
          case 2:
            this.isture = true;
            this.GetPeopleMediations();
            break;
          default:
        }
      } else {
        switch (type) {
          case 1:
            this.isture = false;
            this.GetLegalAids();
            break;
          case 2:
            this.isture = true;
            this.GetLegalAids();
            break;
          default:
        }
      }
    },
    //跳转到首页
    fnHome() {
      this.$router.push({
        path: "/"
      });
    },
    //跳转到向阳之旅
    fnSunTour() {
      this.$router.push({
        path: "/Onapprove"
      });
    },
    //获取人民调解列表
    GetPeopleMediations() {
      this.tip = false;
      this.pages = 10;
      this.pageindex = 1;
      this.totalCount = 0;
      this.loading = true;
      this.$post(Api.GetPeopleMediations, {
        isMy: this.isture,
        startDate: "",
        endDate: "",
        mediationType: 0,
        status: null,
        evaluate: 0,
        filter: "",
        sorting: "",
        maxResultCount: this.pages,
        skipCount: this.pages * (this.pageindex - 1)
      }).then(res => {
        console.log(res);
        if (res.data.success == true) {
          this.loading = false;
          this.Articles = res.data.result.items;
          this.totalCount = res.data.result.totalCount;
          $('.divs').css('height',350+'px')
          if (this.totalCount == 0) {
            this.datalist = true;
            this.allLoaded = true;
          }
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    //获取人民援助列表
    GetLegalAids() {
      this.tip = false;
      this.pages = 10;
      this.pageindex = 1;
      this.totalCount = 0;
      this.loading = true;
      this.$post(Api.GetLegalAids, {
        isMy: this.isture,
        startDate: "",
        endDate: "",
        status: null,
        evaluate: 0,
        filter: "",
        sorting: "",
        maxResultCount: this.pages,
        skipCount: this.pages * (this.pageindex - 1)
      }).then(res => {
        console.log(res);
        if (res.data.success == true) {
          this.loading = false;
          this.Articles = res.data.result.items;
          this.totalCount = res.data.result.totalCount;
          $('.divs').css('height',350+'px')
          if (this.totalCount == 0) {
            this.datalist = true;
            this.allLoaded = true;
          }
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    //下拉加载
    loadBottom() {
      if (this.radio2 == 1) {
        switch (this.isActive) {
          case 1:
            this.isture = false;
            this.loading = true;
            this.pageindex++;
            this.$post(Api.GetPeopleMediations, {
              isMy: this.isture,
              startDate: "",
              endDate: "",
              mediationType: 0,
              status: null,
              evaluate: 0,
              filter: "",
              sorting: "",
              maxResultCount: this.pages,
              skipCount: this.pages * (this.pageindex - 1)
            }).then(res => {
              console.log(res);
              if (res.data.success == true) {
                this.loading = false;
                this.Articles = this.Articles.concat(res.data.result.items);
                this.totalCount = res.data.result.totalCount;
                if (this.totalCount == this.Articles.length) {
                  this.tip = true;
                  this.allLoaded = true;
                }
                this.$refs.loadmore.onBottomLoaded(); //finish refreshing state
              } else {
                this.loading = false;
                this.allLoaded = true; // 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded();
                this.$message.error(res.data.error);
              }
            });
            break;
          case 2:
            this.isture = true;
            this.loading = true;
            this.pageindex++;
            this.$post(Api.GetPeopleMediations, {
              isMy: this.isture,
              startDate: "",
              endDate: "",
              mediationType: 0,
              status: null,
              evaluate: 0,
              filter: "",
              sorting: "",
              maxResultCount: this.pages,
              skipCount: this.pages * (this.pageindex - 1)
            }).then(res => {
              console.log(res);
              if (res.data.success == true) {
                this.loading = false;
                this.Articles = this.Articles.concat(res.data.result.items);
                this.totalCount = res.data.result.totalCount;
                if (this.totalCount == this.Articles.length) {
                  this.tip = true;
                  this.allLoaded = true;
                }
                this.$refs.loadmore.onBottomLoaded(); //finish refreshing state
              } else {
                this.loading = false;
                this.allLoaded = true; // 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded();
                this.$message.error(res.data.error);
              }
            });
            break;
          default:
        }
      } else {
        switch (this.isActive) {
          case 1:
            this.isture = false;
            this.loading = true;
            this.pageindex++;
            this.$post(Api.GetLegalAids, {
              isMy: this.isture,
              startDate: "",
              endDate: "",
              status: null,
              evaluate: 0,
              filter: "",
              sorting: "",
              maxResultCount: this.pages,
              skipCount: this.pages * (this.pageindex - 1)
            }).then(res => {
              console.log(res);
              if (res.data.success == true) {
                this.loading = false;
                this.Articles = this.Articles.concat(res.data.result.items);
                this.totalCount = res.data.result.totalCount;
                if (this.totalCount == this.Articles.length) {
                  this.tip = true;
                  this.allLoaded = true;
                }
                this.$refs.loadmore.onBottomLoaded(); //finish refreshing state
              } else {
                this.loading = false;
                this.allLoaded = true; // 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded();
                this.$message.error(res.data.error);
              }
            });
            break;
          case 2:
            this.isture = true;
            this.loading = true;
            this.pageindex++;
            this.$post(Api.GetLegalAids, {
              isMy: this.isture,
              startDate: "",
              endDate: "",
              status: null,
              evaluate: 0,
              filter: "",
              sorting: "",
              maxResultCount: this.pages,
              skipCount: this.pages * (this.pageindex - 1)
            }).then(res => {
              console.log(res);
              if (res.data.success == true) {
                this.loading = false;
                this.Articles = this.Articles.concat(res.data.result.items);
                this.totalCount = res.data.result.totalCount;
                if (this.totalCount == this.Articles.length) {
                  this.tip = true;
                  this.allLoaded = true;
                }
                this.$refs.loadmore.onBottomLoaded(); //finish refreshing state
              } else {
                this.loading = false;
                this.allLoaded = true; // 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded();
                this.$message.error(res.data.error);
              }
            });
            break;
          default:
        }
      }
    }
  }
};
</script>

<style>
.logout {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 600;
  position: absolute;
  right: 6%;
}
.listSp {
  text-align: left;
  width: 100%;
  background-color: #ffffff;
  box-sizing: border-box;
  padding-top: 0.6rem;
}

.listSp .tiemes {
  font-size: 1.1rem;
  color: #6f6d6d;
  margin-bottom: 1rem;
  display: block;
}

.listSp ul li div.fl {
  border-right: 1px solid #ececed;
  padding: 0.3rem 0.3rem;
}
.fivs {
  display: flex;
}
.listSp ul li div.fl:nth-of-type(3) {
  border-right: 0px solid #ececed;
}

.listSp .tips {
  width: 9rem;
}

.listSp .tips span {
  display: block;
  width: 5rem;
  height: 2.4rem;
  line-height: 2.4rem;
  text-align: center;
  border-radius: 2.4rem;
  color: #fff;
}

.ff {
  background: #ff4473;
}

.ll {
  background: #5495c3;
}

.zz {
  background: #34ab95;
}

.listSp ul li {
  padding: 0.9rem 2rem;
}

.listSp ul li {
  background: #f5f6fa;
  margin-bottom: 0.6rem;
}

.listSp ul li:nth-of-type(1) {
  background: #fff;
}

.listSp ul li div.fl.sqr {
  width: 8.4rem;
  text-align: center;
}

.listSp ul li div.fl.sqr p:nth-of-type(1) {
  color: #b8b8b8;
  font-size: 1rem;
}

.listSp ul li div.fl.sqr p:nth-of-type(2) {
  color: #000000;
  font-size: 1.2rem;
}

.tip {
  line-height: 30px;
  background: #f1f1f1;
  text-align: center;
  margin-top: 15px;
}

.selects {
  background: #fff;
  margin-top: 15px;
  padding-top: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
}
.page-footer {
  padding-bottom: 15px;
  text-align: center;
}
</style>